<template>
  <div class="myContainer">
    <el-row class="myBorderBottom">
      <el-col :span="24" class="myTitleText myLineHeight_40px">{{roomName}}</el-col>
    </el-row>
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="4">
        <template>
          <el-select 
            v-model="cameraValue" 
            placeholder="选择摄像头"
            @change="onCheck"
            value=1
            >
            <el-option
              v-for="item in cameraOptions"
              :key="item.info"
              :label="item.camera_name"
              :value="item.info">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="mymarginTop_10px">
      <!-- <el-col :span="24">
        <div class="myVideo">
          <template>
            <video-player v-if="isUrl" ref="myVideo" :options="videoOptions" class="vjs-custom-skin" @ready="playerReadied"></video-player>
          </template>
        </div>
      </el-col> -->
      <el-col :span="16" :offset="4" class="myBox">
        <div class="myCenter">
          <template>
            <video-player v-if="isUrl" ref="myVideo" :options="videoOptions" class="vjs-custom-skin" @ready="playerReadied"></video-player>
          </template>
        </div>
      </el-col>
    </el-row>
    <el-row class="mymarginTop_10px">
      <el-col :span="24">
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
  }
  .mymarginTop_10px{
    padding-top:10px;
  }
  .myVideo{
    height: 650px;
    position: relative;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myBox{
    background: #333; 
    position: relative;
  }
  .myCenter{
    width: 100%;
    float: left;
    position: relative;
    left: 50%;
  }
</style>

<script>
  //import 'video.js/dist/video-js.css'
  // @import 'vue-video-player/src/custom-theme.css'
  import { getCamera } from '@/api/dev_monitor';
  import videojs from 'video.js'
  window.videojs = videojs 
  require('videojs-contrib-hls/dist/videojs-contrib-hls.js') 
  export default {
     data(){
      return{
        cameraValue:"",
        cameraOptions:[],
        value1:"",
        kw:"",
        tableData:[],
        page_num:1,
        page_size:10,
        total:null,
        roomName:"",
        devRoomId:"",
        url:"",
        player:null,
        isUrl:false,
        videoOptions: {
          height: '600', 
          sources: [{ 
            withCredentials: false, 
            type: "application/x-mpegURL", 
            src: "" 
          }], 
          controlBar: { 
             timeDivider: false, 
             durationDisplay: false 
          }, 
          flash: { hls: { withCredentials: false }}, 
          html5: { hls: { withCredentials: false }}, 
          poster: "", 
          autoplay: true
        }
      }
    },
    mounted(){
      document.title = '设备房监控';
      this.devRoomId = this.$route.query.devRoomId;
      this.roomName = this.$route.query.devRoomName;
      
      this.onGetCamera();
    },
    methods:{
      onDetailed:function(val){
          this.$router.push({
            path:'/yxztInfor',
            query: {}
          })        
      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
      },
      onGetCamera(){
        let vm=this;
        getCamera(vm.devRoomId).then(response => {
          let res=response.data;
          vm.cameraValue=res[0].camera_name;
          vm.onCheck(res[0].info)
          vm.cameraOptions=res;
          //console.log(res)
        }).catch(error => {

        })
      },
      onCheck(val){
        let vm=this;
        let jsonValue=JSON.parse(val);
        let host=jsonValue.host;
        let channel=jsonValue.channel;
        let protocol=jsonValue.protocol;
        vm.isUrl=false;
        vm.$http.get(`http://${host}/api/v1/getchannelstream?channel=${channel}&protocol=${protocol}`).then(response => {
          let res=response.data;
          if(res.EasyDarwin.Header.ErrorNum==200){
            vm.url=`http://${host}${res.EasyDarwin.Body.URL}`;
            vm.videoOptions.sources=[{
              withCredentials: false, 
              type: "application/x-mpegURL", 
              src:vm.url  
            }]
            vm.isUrl=true;
          }else{
            vm.$message.error(res.EasyDarwin.Header.ErrorString);
          }
        })
      },
      playerReadied(player) { 
         var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls 
         player.tech_.hls.xhr.beforeRequest = function(options) { 
           return options 
         } 
      },
      onBack(){
        this.$router.go(-1)
      } 


    }

  }

</script>  




